<template>
    我的报名
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="姓名"
            label="*姓名"
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
            v-model="number"
            type="number"
            name="userCode"
            label="*编号"
            placeholder="请填写编号"
            :rules="[{ required: true, message: '请填写编号' }]"
            />           
            <van-field name="radio" label="*性别">
                <template #input>
                    <van-radio-group v-model="checked" direction="horizontal">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
            v-model="number"
            type="number"
            name="userPhone"
            label="*手机号"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
            /> 
            <van-field
            v-model="userSchool"
            name="userSchool"
            label="*学校"
            placeholder="请填写学校"
            :rules="[{ required: true, message: '请填写学校' }]"
            />
            <van-field
            v-model="userMajor"
            name="userMajor"
            label="*专业"
            placeholder="请填写专业"
            :rules="[{ required: true, message: '请填写专业' }]"
            />
            <van-field name="checkbox" label="*人员属性">
                <template #input>
                    <van-tag round type="primary">群众</van-tag>
                    <van-tag round type="primary">团员</van-tag>
                    <van-tag round type="primary">党员</van-tag>
                </template>
            </van-field>
        </van-cell-group>
            
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            提交
            </van-button>
        </div>
        </van-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
</script>

<style scoped>

</style>